<!--suppress ALL -->
<template>
	<view class="background">
		
		  <view>
		    <view class="horizontal-navbar">
		      <view class="nav-item" v-for="(item, index) in navItems" :key="index" @click="navigateTo(item.pagePath)">
		        <text>{{item.text}}</text>
		      </view>
		    </view>
			
			<view class="search-container">
                <uni-search-bar placeholder="请输入姓名/学号关键字查询" bgColor="#FFFFFF" @confirm="search" style="width: 350px;" />
			</view>
		    <!-- 页面内容区域 -->
		    <view class="card_container" v-for="(item,index) in student">
				
				<uni-card class="registationed_card">
					<image src="../../static/registrationed.png" style="width: 16px; height: 16px;"
					class="registationed_img"></image>   
					<view class="registationed_name">{{item.name}}</view>
					<view class="registationed_num">{{item.num}}</view>
					<view>学院:{{item.aca}}</view>
					<view>专业:{{item.major}}</view>
					<view class="dashed-text">免上报说明:{{item.description}}</view>
				    <view class="status" style="color: darkred;">恢复上报</view>
			    </uni-card>
				
			</view>
		  </view>
		
	</view>
</template>

<script setup>

	import { ref , computed} from 'vue';
	import UniSearchBar from "../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";
	
	const navItems = ref([
	  { text: '已登记', pagePath: 'EFR_1' },
	  { text: '管理范围', pagePath: 'EFR_2' },
	  // 添加更多导航项
	]);
	
	const navigateTo = (pagePath) => {
	  uni.navigateTo({
	    url: pagePath
	  });
	};
	
	const student = ref(
	[{
		name:"程航天",
		num:22445578,
		aca:"航天航空学院",
		major:"先进飞行器设计",
		description:"着急出校"
	},
    {
        name: "林晓婉",
        num: 22445579,
        aca: "计算机学院",
        major: "计算机科学与技术",
        description: "参加技术交流活动"
    },
    {
        name: "苏泽宇",
        num: 22445580,
        aca: "电子工程学院",
        major: "电子信息工程",
        description: "去电子元件市场采购"
    },
    {
        name: "叶晴柔",
        num: 22445581,
        aca: "化学化工学院",
        major: "化学工程与工艺",
        description: "到合作企业做实验"
    },
    {
        name: "萧睿渊",
        num: 22445582,
        aca: "机械工程学院",
        major: "机械设计制造及其自动化",
        description: "参加机械创新大赛"
    },
    {
        name: "楚诗涵",
        num: 22445583,
        aca: "建筑学院",
        major: "建筑学",
        description: "实地考察建筑项目"
    },
    {
        name: "秦俊驰",
        num: 22445584,
        aca: "生物科学学院",
        major: "生物技术",
        description: "采集生物样本"
    },
    {
        name: "韩雅琴",
        num: 22445585,
        aca: "经济管理学院",
        major: "工商管理",
        description: "参加商业竞赛"
    },
    {
        name: "魏子轩",
        num: 22445586,
        aca: "传媒学院",
        major: "新闻学",
        description: "外出采访"
    }]
)



const searchQuery = ref('');
// 筛选条件
const selectedFilter = ref('');

// 计算属性：根据筛选条件和搜索关键字动态筛选学生数据
const filteredStudents = computed(() => {
  let filtered = students.value;

  // 根据筛选条件筛选数据
  if (selectedFilter.value) {
    filtered = filtered.filter(student => student.abnormal.includes(selectedFilter.value));
  }

  //trim 消除空格造成的影响
  // 根据搜索关键字进一步筛选数据
  if (searchQuery.value.trim()) {
    filtered = filtered.filter(
        student =>
            student.name.includes(searchQuery.value) ||
            student.id.includes(searchQuery.value)
    );
  }
  return filtered;

});

// 搜索功能
const search = (e) => {
  console.log(e)
  searchQuery.value = e.value;
};

// 重置搜索
const resetSearch = () => {
  searchQuery.value = ''; // 清空搜索关键字
  selectedFilter.value = '';
};

const applyFilter = (filter) => {
  selectedFilter.value=filter;// 设置当前筛选条件
}
</script>

<style>

	.background{
		width: 100vw;
		height: 100vh;
		background: #F3F5F9;
	}     
	
	.horizontal-navbar {
		display: flex;
		background-color: #f5f5f5;
		padding: 10px;
		  
	    justify-content: space-between; /* 均匀分布导航项 */
	    padding: 10px;
	}
	
	.nav-item {
	    flex: 1; /* 让每个导航项占据相等的空间 */
	    text-align: center; /* 文本居中 */
	    margin-right: 20px;
	}
	
	.search-container {
		width: 500px;
	    display: flex;
	    margin-left: 20px;
		margin-top: 12px;
	}
	
	.search-input {
	    flex: 1;
	    border: 1px solid #ccc;
	    height: 40px;
	    border-radius: 5px;
	    padding-left: 10px;
	}
	
	.registationed_img{
		display: flex;
		margin-top: 19px;
		margin-left: 5px;
	}
	
	.registationed_card{
		display: flex;
	}
	
	.dashed-text {
	  border-bottom: 1px dashed #ccc;
	}
	
	.registationed_name{
		display: flex;
		margin-top: 19px;
		text-indent: 10px;
	}
	
	.registationed_num{
		display: flex;
		text-indent: 180px;
	}
	
	.registationed_img,.registationed_name,.registationed_num{
		display: inline-block;
	}
	
	.uni-card>view{
		padding: 10px;
	}
	
	.uni-card{
		padding: auto;
		margin-top:12px;
	}
</style>
